<template>
  <div class="data-import">
    <el-card class="import-card">
      <div slot="header">
        <span>数据导入</span>
      </div>
      
      <el-upload
        class="upload-demo"
        action=""
        :auto-upload="false"
        :on-change="handleFileUpload"
        :show-file-list="false"
        accept=".xlsx, .xls"
      >
        <el-button type="primary" icon="el-icon-upload2">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 文件</div>
      </el-upload>

      <el-button 
        type="success" 
        icon="el-icon-check"
        @click="sendData"
        :disabled="!data.length"
        style="margin-left: 10px">
        确认数据
      </el-button>

      <!-- 预览数据表格 -->
      <div v-if="data.length" class="preview-table">
        <h3>数据预览</h3>
        <el-table
          :data="data"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
          border
          stripe
          height="400"
        >
          <el-table-column
            v-for="(header, index) in headers"
            :key="index"
            :prop="index.toString()"
            :label="header"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { EventBus } from "../event.js";

export default {
  name: 'DataImport',
  data() {
    return {
      data: [],
      headers: [],
    };
  },

  methods: {
    handleFileUpload(file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        try {
          const binaryStr = e.target.result;
          const workbook = XLSX.read(binaryStr, { type: "binary" });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

          if (jsonData.length < 2) {
            this.$message.error('文件内容为空或格式不正确');
            return;
          }

          this.headers = jsonData[0];
          this.data = jsonData.slice(1);
          
          this.$message({
            message: '文件读取成功',
            type: 'success'
          });
        } catch (error) {
          this.$message.error('文件读取失败，请检查文件格式');
          console.error('File reading error:', error);
        }
      };

      reader.readAsBinaryString(file.raw);
    },

    sendData() {
      if (!this.data.length) {
        this.$message({
          message: '请先导入数据',
          type: 'warning'
        });
        return;
      }

      EventBus.$emit("data-sent", this.data);
      this.$message({
        message: '数据已发送进行计算',
        type: 'success'
      });
    },
  },
};
</script>

<style scoped>
.data-import {
  padding: 20px;
}

.import-card {
  margin-bottom: 20px;
}

.preview-table {
  margin-top: 20px;
}

.el-upload__tip {
  margin-top: 10px;
  color: #909399;
}

h3 {
  margin: 20px 0;
  color: #606266;
}

.el-button {
  margin: 10px 0;
}

/* 响应式布局调整 */
@media screen and (max-width: 768px) {
  .data-import {
    padding: 10px;
  }
}
</style> 